<template>
	<view class="contact-pop-layout">
		<uv-popup ref="popupRef" mode="bottom" round="20rpx" closeable>
			<view class="contact-box">
				<view class="contact-item" v-for="(item,index) in list" :key="index">
					<image class="contact-item-icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{item.title}}</text>
					<image class="contact-item-right-icon" :src="item.rightIcon" mode="aspectFit" @tap="didSelectItem(item)"></image>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { CUSTOMSERVICE_TEL,WECHAT_CUSTOMSERVIC_CODE,WECHAT_OFFICIAL_ACCOUNDT } from '@/common/config/config.js'
	import { ref } from 'vue'
	const popupRef = ref(null)
	const list = ref([{
		title:`微信客服号（${WECHAT_CUSTOMSERVIC_CODE}）`,
		value:WECHAT_CUSTOMSERVIC_CODE,
		icon:'/static/my/my_contact_1.png',
		rightIcon:'/static/my/my_copy.png',
		type:1
	},
	{
		title:`公众号（${WECHAT_OFFICIAL_ACCOUNDT}）`,
		value:WECHAT_OFFICIAL_ACCOUNDT,
		icon:'/static/my/my_contact_2.png',
		rightIcon:'/static/my/my_copy.png',
		type:2
	},
	{
		title:CUSTOMSERVICE_TEL,
		value:CUSTOMSERVICE_TEL,
		icon:'/static/my/my_contact_3.png',
		rightIcon:'/static/my/my_phone.png',
		type:3
	}
	])
	const open = ()=>{
		popupRef.value.open()
	}
	const didSelectItem = (item)=>{
		console.log(item)
		if(item.type == 3) {
			uni.makePhoneCall({
				phoneNumber:item.value
			})
		}
		else{
			uni.$utils.copy(item.value)
		}
	}
	defineExpose({
		open
	})
	
</script>

<style lang="scss" scoped>
.contact-box{
	padding: 80rpx 30rpx 30rpx;
	background-color: #ffffff;
	/* #ifdef H5 */
	padding-bottom: 130rpx;
	/* #endif */
	.contact-item{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		.contact-item-icon{
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}
		.contact-item-right-icon{
			width: 48rpx;
			height: 48rpx;
			margin-left: auto;
		}
	}
}
</style>